import React, {useEffect, useState, useCallback} from 'react';
import {Spin, Drawer} from 'antd';
import {usePersistFn} from 'ahooks';

import moment from 'moment';
import {getAfterAndBeforeEvents} from '~/service/liveMonitor';
import {dimensionMap, roomMessageMap} from '~/page/liveMonitor/config.js';
import CommonCard from '../../common/CommonCard';
import TeacherEvents from '../LiveRoomInformation/TeacherEvents';

import './index.styl';

const dimensionId = 'LiveRoomDetail_select_event_time_sub';
const title = ['前5分钟事件', '后5分钟事件'];
const FIVE_MINUTE = 5;

export default ({
    setVisible,
    visible,
    params,
    searchParams,
    setDrawerParams
}) => {

    // 后5分钟事件
    const [afterEvents, setAfterEvents] = useState([]);
    // 前5分钟事件
    const [beforeEvents, setBeforeEvents] = useState([]);

    const [loading, setLoading] = useState(true);

    const handleDrawerClose = () => {
        setVisible(false);
        setDrawerParams('');
    };

    const getEvents = useCallback(
        async eventParams => {
            setLoading(true);
            const res = await getAfterAndBeforeEvents(eventParams);
            if (res?.code === 0 && res?.data) {
                const {data = []} = res;
                setLoading(false);
                return data;
            }
            return [];
        }, []
    );

    useEffect(() => {

        if (params && searchParams) {

            const time = `2000-01-01 ${params}`;

            const after = moment(time).add(FIVE_MINUTE, 'm')
                .format('HH:mm');
            const before = moment(time).subtract(FIVE_MINUTE, 'm')
                .format('HH:mm');

            const dimensionAndValues = {
                dimensionId,
                dimensionName: dimensionMap.get(dimensionId)
            };


            const afterEventsDimension = {
                ...dimensionAndValues,
                value: [params, after]
            };
            const beforeEventsDimension = {
                ...dimensionAndValues,
                value: [before, params]
            };

            const afterEventsDashboard = {
                dashBoardId: roomMessageMap.get(title[1]).dashBoardId,
                dashBoardName: roomMessageMap.get(title[1]).dashBoardId,
            };
            const beforeEventsDashboard = {
                dashBoardId: roomMessageMap.get(title[0]).dashBoardId,
                dashBoardName: roomMessageMap.get(title[0]).dashBoardId,
            };

            const afterEventParams = {
                dimensionAndValues: searchParams.concat(afterEventsDimension),
                dashBoardList: [afterEventsDashboard],
            };
            const beforeEventsParams = {
                dimensionAndValues: searchParams.concat(beforeEventsDimension),
                dashBoardList: [beforeEventsDashboard],
            };

            (async () => {
                const beforeData = await getEvents(beforeEventsParams);
                const afterData = await getEvents(afterEventParams);
                setBeforeEvents(beforeData);
                setAfterEvents(afterData);
            })();
        }
    }, [params, getEvents, searchParams]);


    return (
        <Drawer
            placement="right"
            visible={visible}
            onClose={handleDrawerClose}
            title="前后5分钟事件"
            width="370px"
            maskClosable={false}
        >
            <CommonCard title={title[0]}>
                <Spin spinning={loading}>
                    <div className="drawer-events-div">
                        <TeacherEvents
                            data={beforeEvents}
                            title={title[0]}
                        />
                    </div>
                </Spin>
            </CommonCard>
            <CommonCard title={title[1]}>
                <Spin spinning={loading}>
                    <div className="drawer-events-div">
                        <TeacherEvents
                            data={afterEvents}
                            title={title[1]}
                        />
                    </div>
                </Spin>
            </CommonCard>
        </Drawer>
    );
};

